<template>
  <view class="viewport">
    <fui-nav-bar background="#0052D9" title="筛选" color="#fff" @leftClick="leftClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="ul">
        <view class="li">
          <fui-input label="备件编号"  v-model="code"  label-size="28"  borderTop placeholder="请输入"></fui-input>
					<fui-input label="备件名称" v-model="type"  label-size="28"  borderTop placeholder="请输入"></fui-input>
          <fui-input v-model="audit" label="备件类型" label-size="28" :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="40" name="arrowright" @click="showA = true"></fui-icon>
          </fui-input>
          <fui-input v-model="audit1" label="备件单位" label-size="28"  :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="40" name="arrowright" @click="showD = true"></fui-icon>
          </fui-input>
					<view class="inventory">
						<view class="">
							当前库存
						</view>
						<view class="inventory_1">
							<fui-input class="inventory_1_1" v-model="count1" label-size="28"  borderTop placeholder="请输入"></fui-input>
							<view class="inventory_1_2">
								~
							</view>
							<fui-input class="inventory_1_3" v-model="count2" label-size="28"  borderTop placeholder="请输入"></fui-input>
						</view>
					</view>
					<view class="inventory">
						<view class="">
							更换数量
						</view>
						<view class="inventory_1">
							<fui-input class="inventory_1_1" v-model="count3" label-size="28"  borderTop placeholder="请输入"></fui-input>
							<view class="inventory_1_2">
								~
							</view>
							<fui-input class="inventory_1_3" v-model="count4" label-size="28"  borderTop placeholder="请输入"></fui-input>
						</view>
					</view>
        </view>
      </view>
      <fui-picker :options="optionsA" :show="showA" @change="changeA" @cancel="cancelA"></fui-picker>
      <fui-picker :options="optionsB" :show="showD" @change="changeD" @cancel="cancelD"></fui-picker>
    </view>
    <view class="footer">
      <view class="reset" @click="reset">重置</view>
      <view class="reset confirm">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const leftClick = () => {
  uni.navigateBack();
};
const rightClick = () => {};
const count1 = ref('');
const count2 = ref('');
const count3 = ref('');
const count4 = ref('');
const code = ref('');
const type = ref('');

const showA = ref(false);
const audit = ref('');
const optionsA = ref(['全部', '备件类型1', '备件类型2', '备件类型3', '备件类型4']);

const showD = ref(false);
const audit1 = ref('');
const optionsB = ref(['全部', '备件单位1', '备件单位2', '备件单位3', '备件单位4']);

const changeA = (e) => {
  audit.value = e.value;
  showA.value = false;
  console.log(e);
};
const changeD = (e) => {
  audit1.value = e.value;
  showD.value = false;
  console.log(e);
};

const cancelA = () => {
  showA.value = false;
};
const cancelD = () => {
  showD.value = false;
};


//重置
const reset = () => {
  audit.value = '';
	audit1.value = '';
	count1.value = '';
	count2.value = '';
	count3.value = '';
	count4.value = '';
	code.value = '';
	type.value = '';
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.warp {
  flex: 1;
	.inventory{
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		.inventory_1{
			display: flex;
			margin-left: 30rpx;
			align-items: center;
			.inventory_1_1{
				width: 220rpx;
			}
			.inventory_1_2{
				margin-left: 60rpx;
			}
			.inventory_1_3{
				width: 220rpx;
			}
		}
	}
}
.footer {
  display: flex;
  .reset {
    width: 50%;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #ccc;
    color: #0052d9;
  }

  .confirm {
    color: #fff;
    background-color: #0052d9;
  }
}
</style>
